<template>
  <el-popover
      placement="right"
      width="400"
      trigger="click"
      v-model="visible">
    <el-form :model="form" :rules="rules" ref="checkin" label-position="top">
      <el-form-item label="New Value" prop="value">
        <el-input v-model="form.value"></el-input>
      </el-form-item>
      <el-form-item label="Comments" prop="comments">
        <el-input type="textarea" v-model="form.comments"  placeholder="Provide comment for check in"></el-input>
      </el-form-item>
      <el-form-item style="text-align: right">
        <el-button size="small"  @click="resetForm('checkin')">Cancel</el-button>
        <el-button size="small" type="primary" @click="submitForm('checkin')" v-loading="loading">Check In</el-button>
      </el-form-item>
    </el-form>
    <span style="cursor: pointer" slot="reference">{{item.names}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
  </el-popover>
</template>

<script>
import moment from 'moment'

export default {
  name: "score-card-new-value",
  props: ['item'],
  data () {
    return {
      loading: false,
      visible: false,
      form: {
        value: '',
        comments: ''
      },
      rules: {
        value: [
          { required: true, message: 'Please Enter', trigger: 'change' },
          { pattern: /^\d+(\.\d+)?$/, message: "must be a number", trigger: "change" },
        ],
        comments: [
          { max: 200, message: 'Maximum 200 characters', trigger: 'change' }
        ],
      }
    }
  },
  watch: {},
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {

          this.loading = true
          if (this.item.gadgetId) {
            return this.getJsonData()
          }
          const { snapshotUpdate } = this.$interface.reports
          const key = this.item.fields
          const params = {
            id: this.item.id,
            comment: this.form.comments,
            updateExt : {
              [key]: this.form.value
            }
          }
          const { data } = await snapshotUpdate(params)
          if (data.code === 0) {
            this.$emit('success', {
              key: this.item.date,
              value: this.form.value
            })
            this.item.names = this.form.value
            this.visible = false
            this.$message.success(data.msg)
          } else {
            this.$message.error(data.msg)
          }
          this.loading = false
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.visible = false
    },
    async getJsonData () {
      const { getSnapshotData } = this.$interface.reports
      const params = {
        gadgetId: this.item.gadgetId
      }
      try {
        const { data } = await getSnapshotData(params)
        this.replaceKey(data.data, this.item.fields, Number(this.form.value))
        data.data.syncTime = moment(this.item.timezone).format('YYYY-MM-DD') +'T'+ data.data.syncTime.split('T')[1]
        delete data.data.id
        await this.saveJsonData(data.data)
      } catch (error) {
        this.loading = false
      }
    },
    async saveJsonData (params) {
      params.comment = this.form.comments
      const { saveSnapshotData } = this.$interface.reports
      const { data } = await saveSnapshotData(params)
      if (data.code !== 0) {
        this.$message.error(data.msg)
      } else {
        this.$emit('success', data.data)
        this.item.names = this.form.value
        this.visible = false
        this.$message.success(data.msg)
      }
      this.loading = false
    },
    replaceKey (obj, key, value) {
      if (obj instanceof Array) {
        obj.forEach((item) => {
          this.replaceKey(item, key, value)
        })
      } else if (obj instanceof Object) {
        for (let k in obj) {
          if (k === key) {
            obj[k] = value
          } else {
            this.replaceKey(obj[k], key, value)
          }
        }
      }
    }
  }
}
</script>

<style scoped>

</style>